<template>
	<view>
		<!-- 组件封装技巧：内部封装如下插槽和属性都支持: 传入slot会替换，不传slot传props会直接渲染 -->
		<div>
			<slot name="content">
				{{ content }}
			</slot>
		</div>
		<!-- <cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<view slot="content">返回</view>
			<view content="content"></view>
		</cu-custom> -->

		<!-- https://ext.dcloud.net.cn/plugin?id=55 -->
		<!-- https://uniapp.dcloud.net.cn/component/uniui/uni-easyinput.html -->
		<!-- 颜色类型，可选值：default（灰色）、primary（蓝色）、success（绿色）、warning(黄色)、error(红色) -->

		<!-- uni-form表单组件-->
		<view class="content">
			<!-- 核心表单组件 -->
			<uni-forms>
				<!-- 输入框 -->
				<!-- type: text, textarea，password, number[数字九宫格], idcard[小程序支持]，digit[带小数点数字] ,[radio, email，checkbox等都不支持]-->
				<!-- disable，focus，clearable 这些基础属性都支持 -->
				<!-- trim：left, right, both[两边], all, none(默认) [效果是输入被replace，而非禁止输入] -->
				<!-- type="password" 自动显示眼睛开关， passwordIcon false不显示眼睛 -->
				<!-- type="textarea" autoHeight 文本框自动高度 -->
				<!-- prefixIcon，suffixIcon支持传入uni-icons显示头部尾部图表，<template #right>右侧插槽 -->
				<!-- :inputBorder="false" 取消边框(同时搭配 uni-forms 的 :border="true" 有较好的效果) -->
				<!-- placeholderStyle 可设置placeholder样式 -->
				<!-- maxlength 默认140，-1不限制 -->
				<uni-forms-item label="输入框">
					<uni-easyinput v-model="easyinput" clearable placeholder="请输入"></uni-easyinput>
				</uni-forms-item>

				<!-- 下拉框(不带输入筛选效果，因为禁用无法输入) -->
				<!-- 传入符合 datacom 规范的数据[uni-data-xxx][下拉select，单/多选checkbox, 级联picker] -->
				<!-- clear, placeholder 这些基础属性都支持, emptyTips无选项时的文本 -->
				<!-- 数组类型数据【value-text], disable可选, 不支持map传入映射关系 -->
				<!-- label看源码是有个媒体查询样式hide-on-phone（小于500，app）， 弃用 -->
				<uni-forms-item label="下拉框">
					<uni-data-select v-model="dataselect" :localdata="selectOpt" clear placeholder="请选择"
						@change="consoleLog($event)"></uni-data-select>
				</uni-forms-item>

				<!-- 数据选择器 -->
				<!-- 普通的单选，多选框、并列button风格、tag风格 -->
				<!-- 默认单选, :multiple="true" 多选，多选可配置min-max -->
				<!-- mode显示模式 原始default, 选项不在一行list, 外部边框button, 标签tag -->
				<!-- icon搭配list才生效，left"时有Bug, mode="list" icon="right" 这样才生效（右侧有个对号当选项）  -->
				<!-- 数组类型数据【value-text], disable可选, map可以传入字段映射关系【uni-data-select并不支持】 -->
				<uni-forms-item label="数据选择器">
					<uni-data-checkbox v-model="datacheckbox" :multiple="true" clear placeholder="请选择"
						@change="consoleLog($event)" :localdata="checkboxOpt"
						:map="{ text: 'name', value: 'code' }"></uni-data-checkbox>
				</uni-forms-item>

				<!-- 级联选择器 / 区划选择器 （异步读取数据建议使用自定义区划组件） -->
				<!-- 时间选择器 【单纯时间只能用picker】-->
				<!-- type: 日期date, 日期范围daterange, 日期时间datetime[默认，13位], 日期时间范围datetimerange -->
				<!-- return-type: timestamp, string【默认】, date -->
				<!-- 是否显示秒hide-second, 默认显示-->
				<!-- 边框border，分割器rangeSeparator，提示语[start-/end-]placeholder，disabled -->
				<!-- 清除clear-icon【显示，datetimerange太长手机端需要隐藏秒】 -->
				<!-- 时间无法仅传入 23:59:59秒等 -->
				<uni-forms-item label="日期[范围]">
					<uni-datetime-picker v-model="datetime" type="datetimerange" return-type="timestamp"
						@change="consoleLog($event)" start="2024-3-1 08:00:00" end="2024-3-20 17:59:59" />
				</uni-forms-item>

				<!-- 时间选择 -->
				<!-- 内置组件(picker)不支持双向绑定，需要自己实现逻辑 -->
				<uni-forms-item label="[时-分]">
					<picker v-model="pickertime" mode="time" start="08:00" end="18:00"
						@change="handleModel($event, 'pickertime')">
						<view style="border: 1px solid #e5e5e5; padding: 6px">{{ pickertime }}</view>
					</picker>
				</uni-forms-item>

				<!-- 日期选择器 -->
				<!-- field可以控制显示几列: year[默认]、month、day 【可以只选年】 -->
				<uni-forms-item label="[选择年]">
					<picker v-model="pickerdate" mode="date" fields="year" @change="handleModel($event, 'pickerdate')">
						<view style="border: 1px solid #e5e5e5; padding: 6px">{{ pickerdate }}</view>
					</picker>
				</uni-forms-item>

				<!-- 组合框组件 -->
				<!-- 一般用于可以选择也可以输入的表单项【不是elm那种输入筛选的下拉框】不支持传入清除和插槽 -->
				<!-- 仅支持 num, str 普通数组，不支持key-value对象数组 -->
				<uni-forms-item label="组合框组件">
					<uni-combox v-model="combox" :candidates="comboxOpt" @input="consoleLog($event)"></uni-combox>
				</uni-forms-item>
			</uni-forms>

			<!-- 其他杂项组件 -->
			<view class="other">
				<!-- 导航栏：系统默认就有返回导航; fixed固定 -->
				<uni-nav-bar title="导航栏组件" :fixed="false" left-icon="back" left-text="返回" right-text="菜单"
					@clickLeft="consoleLog('返回')" @clickRight="consoleLog('菜单')"></uni-nav-bar>

				<!-- 搜索栏 @input(实时触发)、@confirm(需要enter键确定) -->
				<uni-search-bar @confirm="consoleLog($event)"></uni-search-bar>

				<!-- 有bug 以下健康通辽代码 -->
				<!-- <uni-search-bar class="text-left" v-model="keyword" :focus="true" :placeholder="hotName" clearButton="always" cancelButton="always" cancelText="搜索" @confirm="getInfo()" @cancel="doHotName()"></uni-search-bar> -->

				<!-- 通告栏：滚动【scrollable】时为单行【single】；可现实喇叭图标、可显示关闭并关闭 -->
				<uni-notice-bar :scrollable="true" :single="false" showIcon="true" showClose="true"
					text="这是 NoticeBar 通告栏1，这是 NoticeBar 通告栏2，;&nbsp;这是 NoticeBar 通告栏3"></uni-notice-bar>

				<!-- 分段器（类似tab页） style-type：button（有背景色）/text（无背景色）current从0开始计 -->
				<uni-segmented-control :current="2" :values="['选项卡1', '选项卡2', '选项卡3']" style-type="button"
					active-color="#4cd964" @clickItem="consoleLog($event)"></uni-segmented-control>

				<!-- 图标:  color(黑色)、size(16);   https://ext.dcloud.net.cn/plugin?id=28 -->
				<!-- 不要用css覆写icon字体，会导致内外层高度坍塌 -->
				<uni-icons type="email" size="24" color="orange" @click="consoleLog('橙色')"></uni-icons>

				<!-- 评分 max最大（默认5） -->
				<!-- touchable滑动手势（true）,允许半星allow-half（false），is-fill未选中镂空（false） -->
				<uni-rate value="3.5" max="10" size="24" :touchable="false" allow-half :is-fill="false"
					@change="consoleLog($event)"></uni-rate>

				<!-- 标签: inverted: 空心  type：控制颜色-->
				<uni-tag text="标签" inverted="true" type="primary" @click="consoleLog('标签')"
					style="width: 50px; padding: 0 10px"></uni-tag>

				<!-- 角标: type 颜色 -->
				<uni-badge text="99" type="error" :inverted="false" @click="consoleLog('角标')"></uni-badge>

				<!-- 倒计时: 带天的、不带天的都支持、不传默认0 -->
				<uni-countdown :day="1" :hour="1" :minute="12" :second="40" :show-day="true" color="#FFFFFF"
					background-color="#00B26A" border-color="#00B26A"></uni-countdown>

				<!-- 加载更多：loading 的状态，可选值：more（loading前）、loading（loading中）、noMore（没有更多了） -->
				<!-- 事件clickLoadMore -->
				<uni-load-more status="loading"></uni-load-more>

				<!-- 标题【只是文本】【uni-section包含副标题】:  -->
				<uni-title type="h2" title="h2 居中" align="center"></uni-title>

				<!-- 轮播图: 使用swiper容器；不需要组件uni-swipe-action【因为这个pc体验不好，划不动不好调试】 -->
				<swiper :autoplay="true" :indicator-dots="true">
					<swiper-item>
						<image src="https://www.wsxa.com/AreWebFileUpload/images/20220903/6379779756923575735277366.png">
						</image>
					</swiper-item>
					<swiper-item>
						<image src="https://www.wsxa.com/AreWebFileUpload/images/20220903/6379779756923575735277366.png">
						</image>
					</swiper-item>
				</swiper>

				<!-- 健康通辽代码， 配置上一屏下一屏部分显示效果 previous-margin="80rpx" next-margin="80rpx"只识别rpx -->
				<!-- <swiper class="image-container" current="0" previous-margin="80rpx" next-margin="80rpx" autoplay
					circular indicator-dots indicator-color="#9d9080" indicator-active-color="#fffffb">
					<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index"
						@click="jumpPage_swiper(item)">
						<view class="wrap">
							<image :src="item.imageUrl"></image>
						</view>
					</swiper-item>
				</swiper> -->

				<!-- 卡片： -->
				<uni-card title="标题文字" extra="额外信息"
					thumbnail="https://www.wsxa.com/AreWebFileUpload/images/20220903/6379779756923575735277366.png"
					style="text-align: left">
					<p>内容主体，可自定义内容及样式</p>
				</uni-card>

				<!-- list列表 -->
				<uni-list :border="false">
					<uni-list-item title="左侧属性" rightText="右侧值" />
					<uni-list-item title="右侧箭头" :show-arrow="true"></uni-list-item>
					<uni-list-item title="标题文字" note="描述信息" :show-badge="true" badge-text="12"></uni-list-item>
					<uni-list-item title="标题文字" :show-switch="true" :switchChecked="true"
						@switchChange="consoleLog($event)"></uni-list-item>
				</uni-list>


				<!-- 折叠面板 -->
				<uni-collapse accordion="true">
					<uni-collapse-item title="标题文字1">
						<view style="padding: 0 0 8px;">手风琴效果11111111111</view>
						<view style="padding: 0 0 8px;">手风琴效果22222222222</view>
					</uni-collapse-item>
				</uni-collapse>

				<!-- 通过 ref 获取组件调用方法 open、close；-->
				<!-- dialog取消没打印（没$event参数） -->
				<button @click="$refs.popup.open()">打开弹窗</button>
				<uni-popup ref="popup" type="dialog">
					<uni-popup-dialog title="成功消息" content="你是否确认删除?"
						@confirm="consoleLog('关闭弹框'); $refs.popup.close()"></uni-popup-dialog>
				</uni-popup>

				<!-- 宫格: showBorder:显示边框(true)、square:正方形(true) -->
				<uni-grid :column="4" :square="true" @change="consoleLog($event)">
					<uni-grid-item>文本</uni-grid-item>
					<uni-grid-item>文本</uni-grid-item>
					<uni-grid-item>文本</uni-grid-item>
					<uni-grid-item>文本</uni-grid-item>
				</uni-grid>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	mixins: [],
	props: {},
	data() {
		return {
			easyinput: '输入框',
			dataselect: '0',
			selectOpt: [{
				value: '0',
				text: '否',
			},
			{
				value: '1',
				text: '是',
			},
			],
			datacheckbox: ['0', '1'],
			checkboxOpt: [{
				code: '0',
				name: '否',
			},
			{
				code: '1',
				name: '是',
			},
			],
			combox: '',
			comboxOpt: [0, '1', '{"name":"abc"}'], // 不支持key-value数组
			datetime: '',
			pickertime: '08:00',
			pickerdate: '2024',
		}
	},
	computed: {},
	watch: {},
	created() { },
	mounted() { },
	destroyed() { },
	methods: {
		consoleLog(e) {
			console.log(e)
		},
		handleModel(e, model) {
			console.log(e)
			this[model] = e.detail.value
		},
	},
}
</script>
<style lang="less" scoped>
page {
	.content {
		margin-top: 50px;
	}
}
</style>